
<template>
    <!-- 添加或修改配置对话框 -->
    <el-card class="card-body">
        <el-row :gutter="20" class="row-style">
            <el-col :span="24" class="left-layout">
                <el-form ref="managerRef" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                                <el-col :span="24">
                                            <el-form-item label="主键" prop="id" v-if="false">
                                                <el-input v-model="form.id" placeholder="请输入主键" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="表id" prop="tableId">
                                                <el-input v-model="form.tableId" disabled placeholder="请输入表id" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="字段名" prop="fieldName" v-if="true">
                                                <el-input v-model="form.fieldName" placeholder="请输入字段名" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="驼峰字段名" prop="camelFieldName" v-if="true">
                                                <el-input v-model="form.camelFieldName" placeholder="请输入驼峰字段名" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="字段注释" prop="fieldTxt" v-if="true">
                                                <el-input v-model="form.fieldTxt" placeholder="请输入字段注释" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="权限控制：是否禁用" prop="authDisabled" v-if="true">
                                                <el-input v-model="form.authDisabled" placeholder="请输入权限控制：是否禁用" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="权限控制：是否显示" prop="authShow" v-if="true">
                                                <el-input v-model="form.authShow" placeholder="请输入权限控制：是否显示" />
                                            </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                            <el-form-item label="权限控制：是否只读" prop="authReadonly" v-if="true">
                                                <el-input v-model="form.authReadonly" placeholder="请输入权限控制：是否只读" />
                                            </el-form-item>
                                </el-col>
                    </el-row>
                </el-form>
                <div class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" round @click="submitForm" v-if="isShow"  size="large">保 存</el-button>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
    //API接口
    import api from '@/api'
    //引入消息弹出框
    import { ElMessage, ElMessageBox } from 'element-plus'
    //上传组件
    import Upload from '@/components/FileUpload/index.vue'
    //富文本组件
    import Editor from '@/components/Editor/index.vue'

    export default {
        components: { Upload, Editor
        },
        props: {
            save:{
                type: Function,
                default: (e,obj) => {
                    obj.$router.go(-1)
                }
            },
            formList: {
                type: Object,
                default() {
                    return {}
                },
            },
        },
        data() {
            return {
                isType:'',
                //表单验证
                form: {},
                isShow:true,
                rules: {
                },
            }
        },
        /**
         * 挂载函数
         */
        mounted() {
            //根据状态判断是否请求详情接口
            this.isType = this.formList.type?this.formList.type:this.$route.query.isType;
            if (this.isType === "edit" || this.isType === "details") {
                //编辑以及详情通过路由跳转传参
                let editid = this.formList.id?this.formList.id:this.$route.query.id;
                //如果事项请页面隐藏提交按钮
                if (this.$route.query.type) {
                    this.isShow = false;
                }
                if(this.formList.instanceId){
                    // 组件时的判断instanceId请求详情接口表单回显数据
                    api.sysFormField.list({instanceId: this.formList.instanceId}).then(res => {
                        let data = res.rows.length?res.rows[0]:{}
                        this.form = data;
                    });
                }else{
                    // 跳转链接时请求详情接口表单回显数据
                    api.sysFormField.editId(editid).then(res => {
                        if (res.data) {
                            this.form = res.data;
                        }
                    });
                }
            }
			this.form = {...this.form,...this.$route.query}

        },
        methods: {


            /** 提交按钮 */
            submitForm() {
                this.$refs['managerRef'].validate(valid => {
                    Object.keys(this.formList).map((key) => {
                        if(this.isType){
                            if(key!='id'){
                                this.form[key] = this.formList[key]
                            }
                        }else{
                            this.form[key] = this.formList[key]
                        }
                    })
                    if (valid) {
                        if (this.isType&&this.form.id) {
                            api.sysFormField
                                .edit(this.form)
                                .then(res => {
                                    this.save(res,this);
                                    this.$message.success(res.msg)
                                })
                                .catch(err => {
                                    this.$message.error(err.msg)
                                })
                        } else {
                            api.sysFormField
                                .add(this.form)
                                .then(res => {
                                    this.save(res,this);
                                    this.$message.success(res.msg)
                                })
                                .catch(err => {
                                    this.$message.error(err.msg)
                                })
                        }
                    }
                })
            },
            /** 更新流程实例、流程状态 */
            /** 取消按钮 */
            cancel() {
                this.$router.go(-1);
            },
        },
    }
</script>

<style lang="less" scoped>
    :deep(.el-tabs__nav-scroll) {
        padding: 0 20px;
    }
    :deep(.el-tabs__content) {
        height: 560px;
        overflow-y: scroll;
    }
</style>
